<template>
	<view class="app-components-menu-card" :class="[`app-components-menu-card--box${menuType}`]">
		<scroll-view scroll-y>
			<view class="menu-scroll">
				<view
					class="menu-item e-flex"
					:class="{ 'is-active': modelValue === index, 'is-prev': index + 1 === modelValue }"
					v-for="(item, index) in list"
					:key="index"
					@tap="handleTap(index)"
				>
					<view class="e-font-28">
						<text>{{ item[label] }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'menu-card',
	props: {
		list: Array,
		menuType: [String,Number],
		label: String,
		modelValue: Number
	},
	emit: ['update:modelValue', 'change'],
	setup(props, { emit }) {
		const handleTap = (index: number) => {
			emit('update:modelValue', index);
			emit('change', index);
		};
		return {
			handleTap
		};
	}
});
</script>

<style lang="scss" scoped>
@include appBem_b(components-menu-card) {
	scroll-view {
		height: 100%;
	}

	&--box1,
	&--box2,
	&--box3,
	&--box4{
		height: 100%;

		.menu-item {
			padding-left: 20rpx;

			> view {
				flex: 1;
				border-radius: 28rpx 0px 0px 28rpx;
			}
		}
	}
	@include appBem_m(box1) {
		.menu-scroll {
			background-color: #f7f7f7;
		}
		.menu-item {
			height: 120rpx;
			background-color: $base-color-white;

			> view {
				height: 56rpx;
				line-height: 56rpx;
				padding-left: 20rpx;
			}
		}
		.is-active {
			> view {
				background: var(--color-primary);
				color: $base-color-white;
			}
		}
	}
	@include appBem_m(box2) {
		.menu-scroll {
			background-color: $base-color-white;
		}
		.menu-item {
			min-height: 120rpx;
			background-color: #f7f7f7;

			> view {
				line-height: 40rpx;
			}
		}
		.is-active {
			background-color: $base-color-white;
			position: relative;

			&::before {
				content: '';
				display: inline-block;
				width: 4rpx;
				height: 48%;
				position: absolute;
				left: 0;
				top: 26%;
				background: var(--color-primary);
				border-top-right-radius: 4rpx;
				border-bottom-right-radius: 4rpx;
			}
		}
		.is-prev {
			border-radius: 0 0 20rpx 0;
		}

		.is-active + view {
			border-radius: 0 20rpx 0 0;
		}
	}
	@include appBem_m(box3) {
		.menu-scroll {
			background-color: #f7f7f7;
		}
		.menu-item {
			min-height: 120rpx;
			background-color: $base-color-white;
	
			> view {
				line-height: 40rpx;
			}
		}
		.is-active {
			background-color: #f7f7f7;
			position: relative;
	
			&::before {
				content: '';
				display: inline-block;
				width: 6rpx;
				height: 48%;
				position: absolute;
				left: 0;
				top: 26%;
				background: var(--color-primary);
				border-top-right-radius: 7rpx;
				border-bottom-right-radius: 7rpx;
			}
		}
		.is-prev {
			border-radius: 0 0 20rpx 0;
		}
	
		.is-active + view {
			border-radius: 0 20rpx 0 0;
		}
	}
	@include appBem_m(box4) {
		.menu-item {
			min-height: 120rpx;
			justify-content: center;
	
			> view {
				line-height: 40rpx;
				text-align: center;
			}
		}
		.is-active {
			font-size: 32rpx;
			font-weight: 600;
			color:var(--color-primary)
	
		}
	}
}
</style>
